<script setup lang="ts">
// import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();

function goWarehousing(){
  router.push('/warehousing')
}

function goCheck(){
  router.push('/check')
}

function goReturning(){
  router.push('/returning')
}

function goLead(){
  router.push('/lead')
}
</script>

<template>
  <div class="toptitlemain">
    <div class="options" @click="goWarehousing">
      <img class="option-img" src="../../../assets/icon_ruku.png" alt="">
      <span>入库</span>
    </div>
    <div class="options" @click="goLead">
      <img class="option-img" src="../../../assets/icon_qingling.png" alt="">
      <span>请领</span>
    </div>
    <div class="options" @click="goReturning">
      <img class="option-img" src="../../../assets/icon_return.png" alt="">
      <span>归还</span>
    </div>
    <div class="options" @click="goCheck">
      <img class="option-img" src="../../../assets/icon_jiancha.png" alt="">
      <span>检查</span>
    </div>
  </div>
</template>

<style scoped lang="less">
.read-the-docs {
  color: #888;
}

.toptitlemain{
  width: 100%;
  height: 29vh;
  display: flex;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  box-sizing:border-box;
  .options {
    cursor: pointer;
    width: 24%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgb(176, 197, 207);
    height: 100%;
    border-radius: 10px;
    align-items: center;
    box-shadow: inset 1px 1px 6px 3px rgb(91, 112,145);
    .option-img{
      width: 50%;
    }
    span{
      color: rgb(255, 255, 255);
      font-size: 25px;
      font-weight: bold;
    }
  }
}

.border{
  
}

</style>
